<template>
    <el-container class="contain">
        <el-header>
            <div class="main-top box box-pack-between box-align-center">
                <div class="box box-align-center fhd">
                    <div class="lnenf">
                        <el-image style="width: 46px;height: 46px;border-radius: 50%;"
                            :src="logourl != null ? logourl : `../static/image/logo.jpg`"></el-image>
                        <span class="schoolname">{{ $store.state.schoolName }}</span>
                        <!-- 切换学校 -->
                        <div class="toggle" @click="toggleDropdown" v-if="maxrole == 'team'">
                            切换学校
                            <i class="el-icon-arrow-down"></i>
                        </div>
                    </div>
                    <div class="ml30">
                        <span>
                            <el-image src="/static/image/menu_icon/icon_hi.png" style="width: 18px;height: 16px;">
                            </el-image> <span style="color: #626BF1;font-size: 18px;">Hi，</span>{{ loginRoleName }}！
                        </span>
                    </div>
                </div>
                <div class="box box-align-center">
                    <!--审核数量提示-->
                    <el-badge :value="$store.state.todocnt" :max="99">
                        <div class="shenhe" @click="iconsh">
                            <img src="../../static/img/daiban.png" style="width: 24px; height: 24px;cursor: pointer;">
                            <span ref="shen">待办</span>
                        </div>
                    </el-badge>

                    <!-- 消息数量提示 -->
                    <el-badge :value="$store.state.msgcnt" :max="99">
                        <div class="tongzhi" @click="iconbell">
                            <!-- <i class="el-icon-bell" v-if="ld==false"></i> -->
                            <img src="../../static/img/tongzhi.png" style="width: 24px; height: 24px;cursor: pointer;">
                            <span ref="tong">通知</span>
                        </div>
                    </el-badge>
                    <!------>
                    <div class="box box-align-center posr">
                        <el-avatar :src="$store.getters.getUser.icon"></el-avatar>
                        <span class="ml10">{{ $store.getters.getUser.name }}</span>
                        <div class="person box box-tb box-pack-center">
                            <span @click="goPerson">个人中心</span>
                            <span @click="changerole()">切换角色</span>
                            <!-- <span @click="handleModify" v-if="maxrole == 'admin'">学校设置</span> -->
                            <span @click="schoolManage()" v-if="maxrole == 'team'">学校管理</span>
                            <span @click="copyCouse()" v-if="maxrole == 'team'">设置</span>
                            <span @click="handleShengXueShow()" v-if="maxrole == 'admin' || maxrole == 'team'">升学</span>
                            <!-- <span @click="handleShowNews()" v-if="maxrole == 'super'">资讯管理</span> -->
                            <!-- <span @click="$router.push('/courseManage')" v-if="maxrole == 'super' ">推荐课程</span> -->
                            <span @click="loginOut()">退出登录</span>
                        </div>
                    </div>
                </div>
            </div>

        </el-header>

        <el-container style="position: relative;">
            <el-aside width="200px">
                <el-col class="menu-bar">
                    <!-- 菜单 -->
                    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen"
                        @close="handleClose" :unique-opened="true" :router="true">
                        <div v-for="(item, i) in menuList" :key="item.element">
                            <el-menu-item v-if="item.childrens.length == 0" :index="item.path">
                                <template slot="title">
                                    <div class="item-list">
                                        <div class="box box-align-center box-pack-start bar">
                                            <el-image :src="item.icon"></el-image>
                                            <span class="ml20">{{ item.permissionsName }}</span>
                                        </div>
                                    </div>
                                </template>
                            </el-menu-item>
                            <el-submenu v-if="item.childrens.length > 0" :index="item.path">
                                <template slot="title">
                                    <div class="item-list">
                                        <div class="box box-align-center box-pack-start bar">
                                            <el-image :src="item.icon"></el-image>
                                            <span class="ml20">{{ item.permissionsName }}</span>
                                        </div>
                                    </div>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item :index="ite.path" v-for="(ite, index) in item.childrens"
                                        :key="ite.element">
                                        {{ ite.permissionsName }}
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </div>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-container class="posa">
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
        <div>
            <el-form :model="formInline" class=searMask v-show="popShow">
                <el-form-item label=" " style="margin: 22px auto 0; width: 90%;">
                    <el-input placeholder="搜索学校名称" v-model="formInline.searchText">
                        <i class="el-input__icon el-icon-search" slot="suffix" @click="init" style="cursor: pointer;"></i>
                    </el-input>
                    <!-- <el-button size="mini" type="primary" @click="init()">查询</el-button> -->
                </el-form-item>

                <el-form-item label=" ">
                    <!-- <el-button type="primary" @click="init()">查询</el-button> -->
                </el-form-item>

                <div div class=" serBox">
                    <div class="serList" v-for="(item, index) in page.list" :key="index">
                        <div class="serItem" @click="changeSchool(item, index)"
                            :class="[activeClass == item.id ? 'active' : '']">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </el-form>

        </div>
        <el-dialog title="升学" :visible.sync="schooldShow">
            <el-form :model="form">
                <el-form-item label="学年学期" :label-width="formLabelWidth">
                    <el-select v-model="form.xnxq" placeholder="请选择" class="text" @change="changeXnxq">
                        <el-option :label="`${item.xn + '-' + item.xq}`" :value="item.xn + '-' + item.xq"
                            v-for="(item, index) in xqList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="升学状态" :label-width="formLabelWidth">
                    {{ form.status }}
                </el-form-item>
                <el-form-item label=" " :label-width="formLabelWidth" v-if="form.status == '未升学'">
                    <el-button type="primary" size="mini" @click="handleShengXue()">升学</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="schooldShow = false">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改信息" :visible.sync="dialogVisible">
            <el-form ref="formInfo" :model="formInfo" label-width="80px" class="reset-form">
                <el-form-item label="学校名称">
                    <el-input v-model="formInfo.schoolNameInfo" class="text"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </div>
        </el-dialog>

    </el-container>
</template>

<script>
// import VueClickaway from 'vue-clickaway';
export default {
    // directives: {
    //     Clickaway: VueClickaway.directive
    // },

    data() {
        return {
            activeClass: -1,
            loading: false,
            // schoolid: this.$store.state.schoolId,
            popShow: false,
            schooldShow: false,
            formInline: {
                state: '',
                searchText: ''
            },
            form: {
                name: '',
                xnxq: '',
                status: ''
            },
            formInfo: {
                schoolNameInfo: '',
                schoolLog:''
            },
            formLabelWidth: '120px',
            xn: '',
            xq: '',
            xqList: [],
            role: this.$store.state.maxRole,
            schoolid: this.$store.state.loginInfo.user.schoolId,
            page: {
                pageNum: 1,
                pageSize: 12,
                list: []
            },
            badge: '',
            schoolName: this.$store.state.schoolName,
            loginRoleName: this.$store.state.loginInfo.roleName,
            maxrole: this.$store.state.maxRole,
            roleList: [],
            menuList: this.$store.state.loginInfo.menus,
            activeIndex: '/',
            logourl: this.$store.state.logo,
            user: this.$store.state.loginInfo.user,
            dialogVisible: false,

        }
    },
    watch: {
        '$route'() {
            this.handleSelect(this.activeIndex)
        },
        "$store.state.user.name": {
            handler: function (newVal, oldVal) {
                console.log(newVal, oldVal);
            }
        }
    },
    created() {
        // 取出本地存储需要将字符串转换成数值
        this.activeClass = JSON.parse(localStorage.getItem('currentShow'))
    },
    mounted() {
        console.log(this.$store.state.logo);
        let path = this.$route.path.substring(0, this.$route.path.lastIndexOf("/"));
        if (path != '') {
            this.activeIndex = path
        } else {
            this.activeIndex = this.$route.path;
        }
        //页面加载完后显示待办信息
        this.getdata();
        this.init()
    },
    methods: {
        //手动升学
        handleShengXue() {
            let params = {
                schoolid: this.schoolid,
                userid: this.user.id,
                xn: this.xn,
                xq: this.xq
            };
            this.$api.wyv3.postHighterSchool(params).then(res => {
                if (res.code == 200) {
                    this.$message.success('操作成功');
                    this.getSchoolStatus()
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        //changeXnxq
        changeXnxq(e) {
            this.xn = e.split('-')[0];
            this.xq = e.split('-')[1].substr(0, 3);
            this.getSchoolStatus()
        },
        //升学
        handleShengXueShow() {
            this.schooldShow = true
            this.getXqList()
        },
        handleShowNews() {
            this.$router.push('news')
        },
        //查询状态
        getSchoolStatus() {
            let params = {
                schoolid: this.schoolid,
                xn: this.xn,
                xq: this.xq
            };
            this.$api.wyv3.getHighterSchoolStatus(params).then(res => {
                this.form.status = res.message
            })
        },
        //学期查询
        getXqList() {
            let params = {
                schoolid: this.schoolid
            };
            this.$api.Admin.getXqList(params).then(res => {
                if (res.code == '0') {
                    this.xqList = res.list;
                    res.list.map(resp => {
                        if (resp.isCur == 1) {
                            this.form.xnxq = resp.xn + resp.xq;
                            this.xn = resp.xn;
                            this.xq = resp.xq.substr(0, 3);
                        }
                    })
                    this.getSchoolStatus()
                } else {
                    this.$message.error('请求失败！');

                }
            })
        },
        // 切换学校
        toggleDropdown() {
            this.popShow = !this.popShow
            // console.log(11111)
        },
        closeDropdown() {
            // this.popShow = true;

        },


        changeSchool(school, index) {
            console.log(school.id, 'index选中学校的下标')
            // debugger
            this.loading = true;
            this.$store.commit("setLogo", school.logo);
            this.$store.commit("setSchoolName", school.name);
            this.$store.commit("setSchoolId", school.id);
            location.reload();
            this.$message({
                message: '您已切换至学校【' + school.name + '】',
                type: 'success'
            });
            this.activeClass = school.id
            localStorage.setItem('currentShow', JSON.stringify(this.activeClass))

        },
        // 搜索学校
        init() {
            // alert(111)
            if (this.role == 'super') {
                this.xxlb(1);
            } else if (this.role = 'team') {
                this.teamxxlb(1);
            }
        },
        //查询超级管理员学校列表
        xxlb(pageNum) {
            var params = {
                searchText: this.formInline.searchText,
                pageNum: pageNum,
                pageSize: this.page.pageSize
            };
            this.$ajax.post('/yschool/pagelist', params).then(res => {
                if (res.code == '0') {
                    this.page = res.page;
                    console.log(this.page)
                    this.size = res.size;
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        //查询服务团队学校列表
        teamxxlb(pageNum) {
            var params = {
                searchText: this.formInline.searchText,
                schoolid: this.schoolid,
                pageNum: pageNum,
                pageSize: this.page.pageSize,
                state: this.formInline.state
            };
            this.$ajax.post('/yschool/teampagelist', params).then(res => {
                if (res.code == '0') {
                    this.page = res.list;
                    console.log(this.page, 'hahahhahhfahhf')
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        //学校管理
        schoolManage() {
            console.log(111);
            this.$router.push('/xxgl')
        },
        // 修改学校
        // handleModify() {
        //     this.dialogVisible = true
        //     // this.info = item
        //     // this.$refs.child.updateInfo();
        // },
        //获取 待办数、未读消息数
        getdata() {
            this.$ajax.post('/ytodo/gettodocnt', {
                userid: this.user.id
            }).then(res => {
                this.$store.state.todocnt = res.cnt;
            });
            this.$ajax.post('/ymsg/getmsgcnt', {
                userid: this.user.id
            }).then(res => {
                this.$store.state.msgcnt = res.cnt;
            });
        },
        listMenu() {
            this.$api.yhcd.yhcd({
                'userid': this.user.id
            }).then(res => {
                console.log(res.list.menus);
                this.roleList = res.list.menus;
            })
        },
        toPath(path) {
            // console.log(path)
            this.$router.push({
                name: path
            })
        },
        copyCouse() {
            this.$router.push({
                path: '/copycourse'
            })
        },
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
            // this.$refs.menus.open(keyPath);
        },
        handleClose(key, keyPath) {
            // this.$refs.menus.open(keyPath);
        },
        handleSelect(index) {
            console.log(index);
            this.activeIndex = index
        },
        changerole() {
            localStorage.removeItem('token');
            this.$router.push({
                path: "/role",
                query: {
                    usercode: this.$store.state.loginInfo.user.userCode
                }
            })
        },
        loginOut() {
            localStorage.removeItem('token');
            localStorage.removeItem('currentShow');
            // this.$router.push({path: "/sy"})
            this.$router.push({
                path: "/login"
            })
        },
        goPerson() {
            this.$router.push({
                path: "/person"
            })
            this.activeIndex = '/'
        },
        iconsh() {
            this.$refs.shen.style.color = "#626BF1"
            this.$refs.tong.style.color = ''
            this.$router.push({
                path: '/todo'
            })
        },
        iconbell() {
            this.$refs.tong.style.color = '#626BF1'
            this.$refs.shen.style.color = ""
            this.$router.push({
                path: "/message"
            })
        },
        //待办信息列表
    }
}
</script>



<style scoped lang="scss">
.el-input__icon.is-suffix {
    cursor: pointer;
}

.active {
    background: #f4f7ff;
    border-radius: 4px;
    box-shadow: 0px 3px 10px 0px rgba(179, 190, 198, 0.15);
}

.contain {
    position: relative;
}

.el-form-item__content {
    display: flex;
}

.searMask {
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    position: absolute;
    top: 89px;
    left: 42px;
    width: 400px;
    height: 400px;
    overflow-y: auto;
    background: #fff;

    .serBox {
        // margin: 0 auto;

        .serList {
            margin: 0 auto;
            width: 90%;
            height: 52px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0px 3px 10px 0px rgba(179, 190, 198, 0.15);

            .serItem {
                margin-top: 10px;
                color: #000;
                text-align: center;
                line-height: 52px;

            }
        }
    }


}

.lnenf {
    display: flex;
    overflow: hidden;
    line-height: 46px;
    align-items: center;

    .toggle {
        width: 80px;
        height: 30px;
        background: #3B65FE;
        margin-left: 10px;
        border-radius: 50px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
    }

    .pop {
        width: 70px;
        height: 81px;
        background: #d75e5e;
        border-radius: 16px;
        box-shadow: 0px 3px 10px 0px rgba(179, 190, 198, 0.15), 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
    }

}

.schoolname {
    display: inline-block;
    height: 46px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #181623;
    margin-left: 10px;
    // white-space: nowrap;
}

//消息数量样式
/deep/ .el-badge__content.is-fixed {
    top: 13px;
    right: 46px;
}

.tongzhi,
.shenhe {
    width: 100px;
    display: flex;
    margin: 0 5px;

    >span {
        display: block;
        width: 30px;
        height: 14px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        cursor: pointer;
    }
}

.posr {
    position: relative;
    height: 71px;

    &:hover {
        .person {
            display: flex;
        }

        ;
    }
}

.posa {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    width: calc(100% - 200px);
    background-color: #fff;
    overflow-y: auto;
}

.person {
    display: none;
    position: absolute;
    top: 66px;
    right: -20px;
    width: 200px;
    height: auto;
    background-color: #fff;
    z-index: 10000;
    box-shadow: 1px 3px 9px 0px rgba(176, 181, 191, 0.13);
    border: 1px solid rgba(176, 181, 191, 0.13);


    span {
        text-align: center;
        height: 40px;
        line-height: 40px;

        &:hover {
            cursor: pointer;
            color: #626BF1;
            transition: width 2s;
        }
    }

    &::after {
        width: 10px;
        height: 10px;
        border-right: 1px solid rgba(176, 181, 191, 0.5);
        border-top: 1px solid rgba(176, 181, 191, 0.5);
        transform: rotate(-45deg);
        position: absolute;
        right: 56px;
        top: -6px;
        content: "";
    }
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.contain>>>.el-header {
    padding: 11px 20px;
    height: 82px !important;
    background-color: #fff;
    border-bottom: 1px solid #D6DBE7;
}

.contain>>>.el-aside {

    background-color: #fff;
}

.contain {
    height: 100%;
}

.main-top {
    padding: 0 20px;
}

.icon-message {
    margin-right: 30px;
    width: 20px;
    height: 24px;
}

.menu-bar {
    padding-top: 43px;
}

.menu-bar>>>.el-menu {
    border: none;
}

.menu-bar>>>.el-menu-item,
.el-submenu {
    width: 180px;
    margin: 0 auto 10px;
    border-radius: 14px;
    border-right: 5px solid #fff;
    color: #5F6572;

    .el-submenu__icon-arrow {
        display: none !important;
    }
}

.menu-bar>>>.el-menu-item.is-active {
    color: #181623;
    background-color: #F0F1F8;

    .item-list i {
        background-color: #626BF1;
    }
}

.menu-bar>>>.el-submenu .el-menu-item {
    width: 180px;
    margin: 0 auto 10px;
    border-radius: 14px;
    border-right: 5px solid #fff;
    color: #5F6572;

    .el-submenu__icon-arrow {
        display: none;
    }
}

.menu-bar>>>.el-submenu__title {
    width: 180px;
    margin: 0 auto 10px;
    border-radius: 14px;
    border-right: 5px solid #fff;
    color: #5F6572;

    .el-submenu__icon-arrow {
        // display: none;
    }
}

.menu-bar>>>.el-submenu.is-active .el-submenu__title {
    color: #181623;
    background-color: #F0F1F8;

    .item-list i {
        background-color: #626BF1;
    }
}

.menu-bar>>>.el-submenu:hover .el-submenu__title {
    color: #181623;
    background-color: #F0F1F8;

    .item-list i {
        background-color: #626BF1;
    }
}

// .menu-bar>>>.el-submenu.is-active{
//     color: #181623;
//     background-color: #F0F1F8;

//     .item-list i {
//         background-color: #626BF1;
//     }
// }
// 二级菜单高亮
.menu-bar>>>.el-submenu .el-menu-item.is-active {
    background-color: #fff;
    color: #626BF1;
}

.menu-bar>>>.el-submenu .el-menu-item:hover {
    background-color: #fff;
    color: #626BF1;
}

.menu-bar>>>.el-submenu .el-menu-item {
    min-width: 180px;
}

.menu-bar>>>.el-menu-item:hover {
    color: #181623;

    .item-list i {
        background-color: #626BF1;
    }
}

.bar>>>.el-image {
    width: 20px;
    height: 20px;
}

.item-list {
    position: relative;

    i {
        position: absolute;
        top: 6px;
        right: -10px;
        display: block;
        width: 5px;
        height: 44px;
        background-color: #fff;
        border-radius: 3px;
    }
}

.el-main {
    background-color: #f7f9fd;
    // min-width: 1200px;
}

// .el-icon-bell {
//     font-size: 24px;
//     color: #909090;
//     &:hover {
//         color: #181623;
//         cursor: pointer;
//     }
//     &:linked {
//         color:#626BF1;
//     }
// }
</style>
